<template>
    <div class="progress">
      <div class="progress-schedule" :class="{isGray:isAbortive}" :style="{width:currentWidth + '%'}" ></div>
    </div>
</template>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">

progress-bar($height) //高度可修改
  .progress
    background #482F35
    min-height 0.1rem
    height $height
    border-radius $height * 0.25
    border: 0.015rem solid #482F35
    overflow hidden

  .progress-schedule
    position: relative
    height $height
    max-width 100%
    background-size: $height*2.75 $height
    background-image url("./img/img_progress.png")
    border-radius .05rem
    //background-image: linear-gradient(-45deg, #feb817 0%, #feb817 30%, #ee564c 30%, #ee564c 50%,#ee564c 51%,#ee564c 70%,#feb817 70%)
    //background-color #f00
    &.isGray
      background-image url("./img/img_progress_gray.png")
      //background-image: linear-gradient(-45deg, #8A8A8A 0%, #8A8A8A 30%, #9D9D9D 30%, #9D9D9D 50%, #9D9D9D 51%,#9D9D9D 70%,#8A8A8A 70%)



progress-bar(0.2rem) //设置进度条高度
</style>

<script type="text/ecmascript-6">
    export default{
        props: {
            max: {
              Type: Number
            },
            current: {
              Type: Number
            },
            isAbortive: {
              Type: Boolean,
            }
        },
        computed: {
          currentWidth() {
              if (this.current){
                let cur = (this.current) / (this.max) * 100
                if (cur < 0){
                  cur = 0
                }
                return cur
              }
          }
        }
    }
</script>
